<template>
  <client-only>
    <div class="lan">

      <!-- 客服 -->
      <new-kefu/>
      <!-- 标头 -->
      <myheader/>
      <!-- 搜索栏 -->
<!--      <div class="btn el-icon-position" :style="{'margin-left':state.showBg?0:'10px'}" @click="store.isLogin == false ?  store.visiable = true:navigateTo('/release')">发布项目</div>-->
      <nav class="search_bar" v-if="state.showBg">
        <img src="@/assets/6c2081d419f59b5f41f95848128ac9f.png"/>
        <div class="input">
          <input
              @blur="state.goodsList=[];getGoodsList();"
              @keyup.enter="state.goodsList=[];getGoodsList();"
              type="text" placeholder="请输入你要查找的内容"
              v-model="state.value">
          <div class="actions">
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="icon clear"
                 @click="clear"
                 v-if="state.value!=''" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm2.54-13.47a.75.75 0 011.061 1.06l-2.475 2.476 2.475 2.475a.75.75 0 01-1.06 1.06l-2.475-2.475-2.475 2.475a.75.75 0 11-1.06-1.06l2.474-2.475L6.53 7.59a.75.75 0 111.06-1.06l2.476 2.474L12.54 6.53z"
                    fill="#fff" fill-opacity=".6"></path>
            </svg>
            <span></span>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon search" viewBox="0 0 18 18">
              <path
                  d="M7.714 0a7.711 7.711 0 0 1 6.083 12.454.749.749 0 0 1 .125.104l3.807 3.808a.964.964 0 0 1-1.363 1.363l-3.807-3.808a.97.97 0 0 1-.106-.125 7.71 7.71 0 0 1-9.132.258A7.714 7.714 0 0 1 7.714 0zm0 1.928A5.784 5.784 0 0 0 1.93 7.713a5.784 5.784 0 1 0 5.784-5.785z"
                  fill="#fff" fill-rule="nonzero"></path>
            </svg>
          </div>
        </div>
      </nav>
      <div v-else class="input bginput">
        <input  @blur="state.goodsList=[];getGoodsList();" type="text" placeholder="请输入项目名称" v-model="state.value">
        <div class="actions">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon clear" v-if="state.value!=''" @click="clear"
               viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm2.54-13.47a.75.75 0 011.061 1.06l-2.475 2.476 2.475 2.475a.75.75 0 01-1.06 1.06l-2.475-2.475-2.475 2.475a.75.75 0 11-1.06-1.06l2.474-2.475L6.53 7.59a.75.75 0 111.06-1.06l2.476 2.474L12.54 6.53z"
                  fill="#fff" fill-opacity=".6"></path>
          </svg>
          <span></span>
          <svg xmlns="http://www.w3.org/2000/svg" class="icon search" viewBox="0 0 18 18">
            <path
                d="M7.714 0a7.711 7.711 0 0 1 6.083 12.454.749.749 0 0 1 .125.104l3.807 3.808a.964.964 0 0 1-1.363 1.363l-3.807-3.808a.97.97 0 0 1-.106-.125 7.71 7.71 0 0 1-9.132.258A7.714 7.714 0 0 1 7.714 0zm0 1.928A5.784 5.784 0 0 0 1.93 7.713a5.784 5.784 0 1 0 5.784-5.785z"
                fill="#fff" fill-rule="nonzero"></path>
          </svg>
        </div>
      </div>

      <!-- 跳转模块 -->
<!--      <nav class="jump" v-if="state.showBg">-->
<!--        <svg-->
<!--            @click="state.jumpL<=0?state.jumpL=0:state.jumpL&#45;&#45;"-->
<!--            class="jump_icon" xmlns="http://www.w3.org/2000/svg"-->
<!--            viewBox="0 0 44 44">-->
<!--          <path fill-rule="evenodd"-->
<!--                clip-rule="evenodd"-->
<!--                d="M24.95 26.95a1 1 0 0 0 0-1.415L21.414 22l3.536-3.535a1 1 0 0 0-1.414-1.415l-4.243 4.243a1 1 0 0 0 0 1.414l4.243 4.243a1 1 0 0 0 1.414 0Z"-->
<!--                fill="#415058"></path>-->
<!--        </svg>-->
<!--        <section class="jump_item" :style="{width:state.showBg?'23%':'100%'}"-->
<!--                 v-for="(item,index) in state.jumpList.slice(state.jumpL*state.jumpLe, state.jumpL*state.jumpLe+state.jumpLe)"-->
<!--                 :key="index">-->
<!--          <img :src="item.pic"/>-->
<!--          <div class="shenglue">{{ item.name }}</div>-->
<!--        </section>-->
<!--        <svg-->
<!--            @click="state.jumpL>=state.jumpList.length/state.jumpLe-1?state.jumpL=state.jumpList.length/state.jumpLe-1:state.jumpL++"-->
<!--            class="jump_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">-->
<!--          <path fill-rule="evenodd" clip-rule="evenodd"-->
<!--                d="M19.293 17.05a1 1 0 0 0 0 1.415L22.828 22l-3.535 3.535a1 1 0 0 0 1.414 1.415l4.243-4.243a1 1 0 0 0 0-1.414l-4.243-4.243a1 1 0 0 0-1.414 0Z"-->
<!--                fill="#415058"></path>-->
<!--        </svg>-->
<!--      </nav>-->
<!--      <nav class="jump" style="padding:0 10px;box-sizing:border-box;margin:0;" v-else>-->
<!--        <el-carousel style="width:100%;height:200px;overflow:hidden;">-->
<!--          <el-carousel-item v-for="(item,index) in state.jumpList" :key="index">-->
<!--            <img style="width:100%;height:200px;" :src="item.pic"/>-->
<!--          </el-carousel-item>-->
<!--        </el-carousel>-->
<!--      </nav>-->

      <div class="main_page" :style="{width:state.showBg?'80vw':'100%'}">
        <!-- 发布/筛选 -->
        <article style="width:100%;">

          <!-- 筛选 -->
          <nav class="tab" :style="{'font-size':state.showBg?'16px':'13px',margin:state.showBg?'0':'0 10px'}">
            <section class="tab_list">
              <section>平台：</section>
              <section
                  @click="state.tabIndex=index;tabClick(item);clickCategory(item);state.tabIndex2=0;"
                  :class="['tab_item', index==state.tabIndex?'tab_active':'']"
                  v-for="(item,index) in state.tabList"
                  :key="index">
                {{ item.categoryName }}
              </section>
            </section>
            <section class="tab_list" style="margin-top:15px;" v-if="state.tabList2.length > 0">
              <section>行业：</section>
              <section @click="state.tabIndex2=index;tabClick(item);"
                       :class="['tab_item', index == state.tabIndex2?'tab_active':'']"
                       v-for="(item,index) in state.tabList2" :key="index+'sub'">
                {{ item.categoryName }}
              </section>
            </section>
          </nav>

          <!-- 热门筛选 -->
          <nav class="tab_list" style="margin:10px 0;" :style="{'font-size':state.showBg?'16px':'13px'}">
            <section style="margin-right:40px;cursor: pointer;"
                     @click="state.hotIndex=index"
                     :style="{color:state.hotIndex==index?'#1684fc':'#888','margin':state.showBg?'0 40px 0 0':'0 10px'}"
                     v-for="(item,index) in state.hotList"
                     :key="index">{{ item.name }}
            </section>
          </nav>

          <!-- 商品 -->
          <article :class="[state.showBg?'goods':'phone_goods']" v-loading="state.loading" >
            <section v-for="(item,index) in state.goodsList"
                     @click="to(item.productId)"
                     :key="index" :class="['good',state.showBg?'':'phone_good']"
                     style="cursor: pointer"
                     :style="{width:state.showBg?'288px':'49%','margin-bottom':state.showBg?'50px':'10px'}">
                <img class="pic" :style="{height:state.showBg?'214px':'135px',}" :src="item.productImg"/>
                <section class="name shenglue">{{ item.productTitle }}</section>
                <section class="user">
                  <section class="center user_name shenglue" :style="{'width':state.showBg?'50%':'100%'}">
                    <img :src="item.userImageUrl" class="logo"/>
                    <section style="width:calc(100% - 40px)">{{ item.userNickName }}</section>
                  </section>
                  <section style="font-size:12px;" v-if="state.showBg">
                    <svg @click.stop="download(item)" xmlns="http://www.w3.org/2000/svg" class="actionIcon"
                         viewBox="0 0 12 11">
                      <path
                          d="M7.207 0a.5.5 0 0 1 .5.5v4h3.721a.5.5 0 0 1 .34.867l-5.222 4.82a.5.5 0 0 1-.678 0L.646 5.367a.5.5 0 0 1 .34-.867l3.72-.001V.5a.5.5 0 0 1 .5-.5h2z"
                          fill="#A4ADB3" fill-rule="evenodd"></path>
                    </svg>
                    {{ item.downNum }}
                    <svg xmlns="http://www.w3.org/2000/svg" class="actionIcon" style="margin-left:15px;"
                         viewBox="0 0 12 11">
                      <path
                          d="M5.5.179a1.5 1.5 0 0 1 1.467 1.187c.122.596.18 1.091.204 3.004l-.002-.107H9.66a1 1 0 0 1 .959 1.285l-1.407 4.737a1 1 0 0 1-.958.715H1a1 1 0 0 1-1-1V6.268a1 1 0 0 1 1-1h.977C3.29 5.25 3.966 4.054 4 1.678a1.5 1.5 0 0 1 1.5-1.5z"
                          fill="#A4ADB3" fill-rule="evenodd"></path>
                    </svg>
                    {{ item.praiseNum }}
                  </section>
                </section>

            </section>
          </article>
          <div class="center" v-if="state.goodsList.length==0"
               :style="{margin:state.showBg?'-200px 0 100px':'0 0 100px'}" style="width:100%;flex-wrap:wrap;">
            <img style="width:150px;" src="https://pay.huijinwei.com/oilAdmin/assets/not_data.7ccb6760.png"/>
            <div style="width:100%;text-align:center;">暂无数据~</div>
          </div>
          <div class="goods_end" v-if="state.goodsList.length>=state.total && state.goodsList.length!=0">已经到底啦~
          </div>
        </article>
      </div>
      <MyFooter :showBg="state.showBg"/>
    </div>
  </client-only>
</template>
<script setup lang="ts">
//增加SEO
useHead({
  title: '项目首页 - 迅颖',
  meta: [
    { hid: 'keywords', name: 'keywords', content: '毕设，论文，项目，Java，爬虫' }
  ]
})


import requester from "~/utils/request";
import {userStore} from "~/composables/useUserStore";
const store = userStore()
import {useRouter} from "vue-router"
const router = useRouter()

const state = reactive(<any>{
  width: 1400,
  height: 1000,
  showLogin: false,
  showBg: true,
  loading: false,
  value: '', // 搜索内容
  jumpL: 0,
  jumpLe: 4,
  tabIndex: 0,
  tabIndex2: 0,
  hotIndex: 0,
  isLogin: true,
  user: {},
  headList: [
    {
      name: '项目广场', path: '/'
    },
    {
      name: '产品服务', path: '/components/product'
    },

  ],
  jumpList: [
    {
      name: '客服12小时在线为您服务',
      pic: '/banner/技术辅导.jpg'
    },
    {
      name: '按照需求专属定制',
      pic: '/banner/需求定制.jpg'
    },
    {
      name: '推荐系统 | 可视化专列',
      pic: '/banner/大数据专区.jpg'
    },
    {
      name: '成为我们的合作伙伴',
      pic: '/banner/升级授权商.jpg'
    },
  ],
  tabList: [],
  tabList2: [],
  categorys: '',
  pageValidate: {
    pageNo: 1,
    pageSize: 8
  },
  total: 10,
  // hotList:[{name: '热门推荐'},{name: '最多浏览'},{name: '最多使用'},{name: '最新发布'}],
  hotList: [],
  goodsList: []
})



//跳转详情页
const to = (id:number) => {
  router.push(`/project/details/${id}`)
}

// 客户端渲染
onMounted(() => {
  state.user = store.token ? store.token : {}
  state.isLogin = store.token ? false : true
  state.width = document.documentElement.clientWidth
  state.height = document.documentElement.clientHeight
  window.onresize = () => {
    state.width = document.documentElement.clientWidth
    state.height = document.documentElement.clientHeight
    state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720 ? false : true
    // jumpLe =  showBg ? (width>720&&width<1100?3:(width>1100&&width<1400? 4 : 5)): 1
  }
  state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720 ? false : true
  window.addEventListener("scroll", handleScroll);
})


// 服务端渲染
getCategoryList()
getGoodsList()

/**
 * 获取类别
 */
function getCategoryList() {
  requester.post('api/category/categoryList').then(res => {
    state.tabList = res.data
    state.tabList.unshift({categoryName: '全部', categoryId: ''})
  })
}

/**
 * 获取商品
 */
function getGoodsList() {
  state.loading = true
  const param = {
    categorys: state.categorys,
    pageValidate: state.pageValidate,
    productName: state.value,
    productType: 1,
    sortOption:3
  }
  if (param.productName == '') delete param.productName
  if (param.categorys == '') delete param.categorys
  requester.post('/api/product/searchProduct', param).then((res:any) => {
    if (res.code == 200) {
      state.total = res.data.count
      state.goodsList.push(...res.data.lists)
      state.loading = false
    }
  })
}
function clear() {
  state.value = ''
  state.goodsList = [];
  getGoodsList()
}

function handleScroll() {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight + 20 >= scrollHeight) {
    if (state.goodsList.length == state.total) return
    state.pageValidate.pageNo++
    getGoodsList()
  }
}



function tabClick(item: any) {
  state.categorys = item.categoryId
  state.pageValidate.pageNo = 1
  state.goodsList = []
  getGoodsList()
}


function clickCategory(item: any) {
  requester.post('/api/category/clickCategory', {
    firstSysId: item.categoryId
  }).then((res:any) => {
    if (res.code == 200) {
      state.tabList2 = res.data
      if (state.tabList2.length > 0) {
        state.tabList2.unshift({categoryName: '全部', categoryId: ''})
      }
    }
  })
}



function download(item: any) {
  if (item.isDownload == 0) return
  else window.open(item.packFiles[0].fileUrl)
}

</script>

<style scoped lang="scss">

:deep(.el-button--primary){
  background-color: #1684fc;
  border-color: #1684fc;
}

.main_page {
  margin: 0 auto;
  box-sizing: border-box;
}

.search_bar {
  height: 420px;
  margin: -8px;
  margin-bottom: -30px;
  position: relative;

  img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 72px;
    height: 290px;
  }
}

.input {
  height: 44px;
  width: 40%;
  border-radius: 4px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 72px;
  height: 290px;
}


.input {
  height: 44px;
  width: 40%;
  border-radius: 4px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 250px;
  left: 30%;
}

.input input {
  height: 100%;
  flex: 1 1 0%;
  font-size: 16px;
  text-indent: 20px;
  background: unset;
  outline: none;
  border: none;
  color: #fff;
}

.input .actions {
  z-index: 5;
  padding-left: 10px;
  padding-right: 20px;
  display: flex;
  align-items: center;
}

input::-webkit-input-placeholder {
  color: #bfbfc4;
}

.input .actions .icon.clear {
  transition: all 0.15s ease-in-out 0s;
  margin-right: 20px;
}

.input .actions .icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.bginput {
  width: calc(100% - 20px);
  margin: 10px;
  background: rgb(243, 244, 246);
  position: unset;
  border-radius: 20px;
}

.jump {
  display: flex;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  margin: 0 7vw;
}

.lan .jump_icon {
  border-radius: 50%;
  box-shadow: 1px 1px 5px #00000020;
  width: 40px;
  cursor: pointer;
}

.jump_item {
  cursor: pointer;
  transition: all 300ms ease-in-out 0s;
  margin: 0 10px;
}

.jump_item img {
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  border-radius: 10px;
}

.shenglue {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  padding: 10px 0;
  border-radius: 8px;
  background: #1684fc;
  color: #fff;
  font-weight: bold;
  width: 150px;
  text-align: center;
  margin: 30px 0;
  cursor: pointer;
}

.tab {
  background: #f2f2f280;
  background: #f2f2f280;
  padding: 24px;
  border-radius: 8px;
  box-sizing: border-box;
}

.tab_list {
  display: flex;
  box-sizing: border-box;
  overflow-x: auto;
  align-items: center;
}

.tab_list section {
  white-space: nowrap;
}

.tab_item {
  border-radius: 20px;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.tab_active {
  background-color: rgba(22, 132, 252, 0.1);
  color: rgb(22, 132, 252);
}

.goods {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 40px 32px;
  padding-bottom: 40px;
  min-height: 300px;
}

.good {
  width: 23%;
  margin: 0 2.6% 15px 0;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
}

.good:nth-child(4n) {
  margin-right: 0;
}

.actionIcon {
  transition: all 0.15s ease-in-out 0s;
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.good:hover {
  box-shadow: 1px 1px 5px #00000020;
}


.phone_goods {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;
}

.phone_good {
  margin: 0;
}

.good:hover {
  box-shadow: 1px 1px 5px #00000020;
}

.good .pic {
  width: 100%;
  border-radius: 5px;
}

.name {
  margin: 10px 0;
  font-size: 16px;
}

.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 13px;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_name {
  width: 50%;
  justify-content: unset;
}

.actionIcon {
  transition: all 0.15s ease-in-out 0s;
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

a:-webkit-any-link {
  text-decoration: none;
  color: #415058;
}

.btn1 {
  font-weight: 500;
  border: 1px solid #666;
  background: #fff;
  color: #666;
  padding: 7px 18px;
  border-radius: 5px;
  cursor: pointer;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  line-height: 35px;
  text-align: center;
  background: #1684fc;
  color: #fff;
}

.angle_bracket_down {
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;
  width: 10px;
  height: auto;
  fill: #c8cdd1;
  margin-left: .75em;
}

.user-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  left: 0;
}

.user-info-dropdown {
  z-index: 1000;
  position: absolute;
  right: 0;
  top: 69px;
  right: 50px;
  width: 260px;
  font-size: 12px;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.user_info {
  justify-content: space-between;
  background: linear-gradient(1turn, #edf5ff .01%, #c8dbff 102.95%);
  padding: 18px;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}

.user_avatar {
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
}

.user_nav {
  padding: 18px 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #dedee4;
  justify-content: unset;
}

.name {
  margin: 10px 0;
  font-size: 16px;
}

.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 13px;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.actionIcon {
  transition: all 0.15s ease-in-out 0s;
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

a:-webkit-any-link {
  text-decoration: none;
  color: #415058;
}

// @media screen and (min-width: 680px) and (max-width: 1200px) {
//   .good {
//     width: 32% !important;
//     margin: 0 0.6% 15px !important;
//   }
// }

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background-color: transparent !important;
}

.goods_end {
  text-align: center;
  color: #6c6c6c;
  width: 100%;
  padding-bottom: 30px;
}
</style>
